<template>
  <ych-modal
    :fullscreen="false"
    :visible="visible"
    :title="$t('m.codegen.button.select_er_model')"
    @ok="handleSubmit"
    @cancel="close"
    :cancelText="$t('m.common.button.close')"
  >
    <a-row :gutter="10" style="background-color: #ececec; padding: 10px;">
      <a-col :md="6" :sm="24">
        <a-card :bordered="false">
          <group-tree v-model="groupId"></group-tree>
        </a-card>
      </a-col>
      <a-col :md="18" :sm="24">
        <a-card :bordered="false">
          <ActAppObjectList :groupId="groupId" @selectErModel="selectErModel"></ActAppObjectList>
        </a-card>
      </a-col>
    </a-row>
  </ych-modal>
</template>

<script>
  import GroupTree from './GroupTree'
  import ActAppObjectList from './ActAppObjectList'
  export default {
    name: 'ERModelSelect',
    components: {
      GroupTree,
      ActAppObjectList
    },
    data() {
      return {
        groupId:"",
        visible: false,
        loading: false,
        erModel:{}
      }
    },

    methods: {
      showModal() {
        this.visible = true;
      },
      close() {
        this.visible = false;
      },
      handleSubmit() {
        let that = this;
        this.$emit("selectErModel",this.erModel);
        that.close();
      },
      selectErModel(erModel){
        this.erModel = erModel
      }
    }
  }
</script>

<style lang="less" scoped>
  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color .3s;
  }
</style>
